<template>
  <view class="container">
    <view class="container__header">
      <!--   搜索框   -->
      <view class="container__header__search">
        <hxk-search v-model="queryParams.keyword" :currentSearchType.sync="searchType" placeholder="搜索房间"
                    @search="handleSearch"/>
      </view>
    </view>
    <view class="container__body">
      <!--   列表   -->
      <view class="container__body__list">
        <view class="container__body__list__item" v-for="(item, index) in list" :key="index">
          <view class="container__body__list__item-header">
            <view class="container__body__list__item-header-left">
              <view class="container__body__list__item-header-left-label">
                <text>{{ item.premisesAddress }}</text>
              </view>
            </view>
            <view class="container__body__list__item-header-right">
              <view class="container__body__list__item-header-right-state"
                    :class="{'container__body__list__item-header-right-state--normal': item.facilitiesState === '1', 'container__body__list__item-header-right-state--freeze': item.facilitiesState === '2'}">
                <text>{{ facilitiesStateMap[item.facilitiesState] }}</text>
              </view>
            </view>
          </view>
          <view class="container__body__list__item-content">
            <view class="container__body__list__item-content-item">
              <view class="container__body__list__item-content-item-label">
                检查点:
              </view>
              <view class="container__body__list__item-content-item-value">
                {{ item.processName }}
              </view>
            </view>
            <view class="container__body__list__item-content-item">
              <view class="container__body__list__item-content-item-label">
                类型:
              </view>
              <view class="container__body__list__item-content-item-value">
                {{ housePictureTypeMap[item.housePictureType] }}
              </view>
            </view>
            <view class="container__body__list__item-content-item">
              <view class="container__body__list__item-content-item-label">
                上传时间:
              </view>
              <view class="container__body__list__item-content-item-value">
                {{ item.createTime }}
              </view>
            </view>

            <view class="container__body__list__item-content-item">
              <view class="container__body__list__item-content-item-label">
                上传人:
              </view>
              <view class="container__body__list__item-content-item-value">
                {{ item.uploadUser }}
              </view>
            </view>
            <view class="container__body__list__item-content-item">
              <view class="container__body__list__item-content-item-label">
                备注:
              </view>
              <view class="container__body__list__item-content-item-value">
                {{ item.remark ? item.remark : '--' }}
              </view>
            </view>

          </view>
          <view class="container__body__list__item-footer">
            <button class="container__body__list__item-footer-btn" @click="handleDetail(item)">
              <text>详情</text>
            </button>
          </view>
        </view>
        <uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more>
      </view>
    </view>
    <!--   底部操作栏   -->
    <view class="container__footer">
      <view class="container__footer__button">
        <button @click="handleAdd">+新增日常检查</button>
      </view>
    </view>
  </view>
</template>
<script>
import {getDailyInspectionList} from "@/api/manager/daily-inspection";

export default {
  name: "index",
  data() {
    return {
      searchType: 'premisesAddress',
      // 列表数据
      list: [],
      // 总数
      total: 0,
      // 分页参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        lockState: null,//锁状态
        keyword: null//搜索关键字
      },
      // 加载状态
      loadStatus: 'more',//more:加载更多,noMore:没有更多数据,loading:加载中
      // 加载提示语
      contentText: {contentdown: '下拉加载更多', contentrefresh: "加载中...", contentnomore: "没有更多数据了"},
      // 相册类型映射
      housePictureTypeMap: {
        '1': '验房',
        '2': '清洁打扫',
        '3': '保洁',
        '4': '报修',
        '5': '看房',
        '6': '日常检查'
      },
      // 设备状态
      facilitiesStateMap: {
        "1": "正常",
        "2": "已损坏"
      },
      // 删除设备
      deleteLockVisible: false,
      // 编辑房间表单
      modifyForm: {
        lockId: null,//锁id
        houseId: null,//房间id
        premisesAddress: null,//房间
        houseAddress: null,//当前房间
      },
      // 设置表单
      setForm: {
        lockId: null,//锁id
        lockName: null,//门锁名称
        brandId: null,//品牌id
        brandName: null,//品牌
        modelName: null,//型号
        mac: null,//MAC
      }
    }
  },
  onLoad() {
    // 页面显示,重新获取数据
    this.initData();
  },
  onReachBottom() {
    // 加载更多,如果总数大于当前页数*pageSize,则加载更多
    if (this.total > this.queryParams.pageNum * this.queryParams.pageSize) {
      this.loadStatus = 'loading';
      this.queryParams.pageNum++;
      this.getList();

    } else if (this.total <= this.queryParams.pageNum * this.queryParams.pageSize) {
      // 已经加载完毕
      console.log("已经加载完毕")
      this.loadStatus = 'noMore';
    }

  },
  methods: {
    initData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: ''//搜索关键字
      }
      this.list = [];
      this.total = 0;
      this.getList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.keyword = this.queryParams.keyword.trim();
      this.list = [];
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        let params = Object.assign({}, this.queryParams)
        console.log('请求参数', params, this.searchType)
        params[this.searchType] = this.queryParams.keyword
        getDailyInspectionList(params).then(res => {
          //当前为第一页
          if (this.queryParams.pageNum === 1) {
            this.list = res.rows;
          } else {
            // 不是第一页,则追加数据
            this.list = this.list.concat(res.rows);
          }
          this.total = res.total;
          this.loadStatus = this.total <= this.queryParams.pageNum * this.queryParams.pageSize ? 'noMore' : 'more';
          // 如果没有数据
          if (this.total === 0) {
            this.loadStatus = 'noMore';
            this.contentText.contentnomore = "暂无数据";
          }
        }).catch(err => {
          console.log(err)
        })

      }, 500);

    },
    // 点击搜索标签
    clickSearchTab(tab) {
      console.log(tab)
      this.queryParams.lockState = tab.value;
      this.handleSearch();
    },
    // 选择房间
    selectHouse() {
      this.$tab.navigateTo({
        url: '/pages/sub-pages/house-manage/common/select-room',
        events: {
          selectHouseCallback: (result) => {
            this.modifyForm.houseId = result.houseId
            this.modifyForm.premisesAddress = result.premisesAddress
          }
        }
      })
    },
    // 新增检查
    handleAdd() {
      this.$tab.navigateTo({
        url: './add',
        events: {
          addCallback: (result) => {
            this.initData();
          }
        }
      })
    },
    // 详情
    handleDetail(item) {
      this.$tab.navigateTo('./detail?housePictureId=' + item.housePictureId)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .container__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    //height: 154rpx;
    display: flex;
    flex-direction: column;

    .container__header__search {

      .container__header__search-input {
        padding: 0 20rpx;

        .search-btn {
          background: $hxk-primary-color;
          color: #fff;
        }

        .cancel-btn {
          color: $hxk-primary-color;
          background: #fff;
          border: none;

          &:after {
            border: none;
          }
        }

        .container__header__search-input-type {
          margin-top: 10rpx;

          ::v-deep .checklist-group {
            display: flex;
          }

          ::v-deep .is--tag {

            &.is-checked {
              background: $hxk-primary-color !important;
              border-color: $hxk-primary-color !important;
            }
          }
        }
      }

      .container__header__search-tabs {
        ::v-deep .u-tabs__wrapper__nav__item__text {
          font-size: 28rpx !important;
        }

        ::v-deep .u-tabs__wrapper__nav__line {
          bottom: 18rpx !important;
          opacity: 0.6 !important;
        }
      }
    }


  }

  .container__body {
    padding: 20rpx;

    .container__body__list {
      margin-bottom: 150rpx;

      .container__body__list__item {
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 30rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .container__body__list__item-header {
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #D8D8D8;

          .container__body__list__item-header-left {
            .container__body__list__item-header-left-label {
              font-weight: 600;
              font-size: 28rpx;
            }
          }

          .container__body__list__item-header-right {
            .container__body__list__item-header-right-state {
              font-weight: 600;
              font-size: 28rpx;
              color: $hxk-primary-color;

              &--freeze {
                color: #D13535;
              }

              &--normal {
                color: $hxk-primary-color;
              }
            }
          }
        }

        .container__body__list__item-content {
          padding: 30rpx 20rpx;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-column-gap: 20rpx;
          grid-row-gap: 10rpx;

          .container__body__list__item-content-item {
            display: flex;
            font-size: 24rpx;
            color: #343434;
            align-items: center;
            margin-bottom: 30rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .container__body__list__item-content-item-label {
              margin-right: 10rpx;
              white-space: nowrap;
            }

            .container__body__list__item-content-item-value {
              white-space: nowrap;
            }
          }

        }

        .container__body__list__item-footer {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 20rpx 0;
          border-top: 1rpx solid #D8D8D8;

          button {
            width: 120rpx;
            height: 50rpx;
            background-color: #fff;
            border-radius: 10rpx;
            font-size: 26rpx;
            color: $hxk-primary-color;
            border: 1rpx solid $hxk-primary-color;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5rpx !important;
            margin: 0;
          }
        }
      }
    }
  }

  .container__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    padding: 0 20rpx;
    height: 140rpx;
    background: #fff;

    .container__footer__button {
      width: 100%;

      button {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: $hxk-primary-color;
        color: #fff;
        font-size: 28rpx;
      }

    }
  }


}

.hxk-dialog__content {
  .hxk-dialog__content-item {
    .hxk-dialog__content-item-label {

    }

    .hxk-dialog__content-item-value {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }

  .hxk-dialog__content-tips {
    font-weight: 350;
    font-size: 24rpx;
    color: $hxk-primary-color;
  }

  ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked {
    .checklist-text {
      color: $hxk-primary-color;
    }

    .radio__inner {
      border-color: $hxk-primary-color;

      .radio__inner-icon {
        background-color: $hxk-primary-color;
      }
    }
  }
}
</style>
